<template>
    <div class="user">
        <header>
            <router-link to="/mobile/usersetting"><</router-link>
            <h3>个人信息</h3>
        </header>
		<div class="div1">
			<div class="img">
				<span>头像</span>
				<div class="file">
					<el-upload class="avatar-uploader" :multipe="false" :show-file-list="false" :auto-upload="false"
						:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
						action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
					</el-upload>
					<span>></span>
				</div>
			</div>
			<div class="name">
				<table>
					<tr>
						<td>
							<p>昵称</p>
						</td>
						<td>
							<input type="text" v-model="user.name"/>
						</td>
					</tr>
					<tr>
						<td>
							<p>手机号</p>
						</td>
						<td>
							<input type="text" v-model="user.phone"/>
						</td>
					</tr>
					<tr>
						<td>
							<p>地址</p>
						</td>
						<td>
							<textarea class="tex" v-model="user.addr"></textarea>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<el-button type="success" @click="update()">更改</el-button>
    </div>
</template>

<script>
export default {
    name:'UpdateUser',
    data(){
        return{
			user:{},
			imageUrl: "",
			fileList: []
        }
    },
    methods:{
		handleChange: function(file, fileList) {
			this.fileList = fileList;
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isPNG = file.type === 'image/png';
			const isLt2M = file.size / 1024/ 1024 < 5;
		
			if (!isJPG && !isJPG) {
				this.$message.error('上传图片只能是 JPG 或者是 PNG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 5MB!');
			}
			return (isJPG || isPNG) && isLt2M;
		},
		update(){
			if(this.$store.state.name!=''){
				let k={
				nickname:this.user.name,
				phone:this.user.phone,
				addr:this.user.addr
				}
				this.$postkv("/api/user/updateShip",k).then((resp)=>{
					console.log(resp.data);
					this.$message({
						message: '个人信息更新成功!',
						type:'success'
					})
				
				})
				let fd = new FormData();
				fd.append("mypic", this.fileList[0].raw);
				this.$postf("/api/user/updatePic",fd).then((resp) => {
					this.$store.state.pic = resp.data.data;
					this.imageUrl=`${this.$ip}/api/public/showimg/${resp.data.data}`;
				})
			}
		},
    },
    mounted(){
		this.imageUrl =`${this.$ip}/api/public/showimg/${this.$store.state.img}`;
		this.$get("/api/user/shipInfo").then((resp)=>{
		    this.user =resp.data.data;
		    console.log(resp.data.data);
		})
	}
}
</script>

<style scoped>
.user{
	width: 100%;
	background-color: #efefef;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.user header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.user header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.user header h3{
	margin-left: 10rem;
}
.user .div1{
	width: 98%;
	margin: 0 auto;
	margin-top: 1.2rem;
	border-radius: 4px;
	background-color: #f5f5f5;
}
.user .div1 .img{
	width: 96%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	font-size: 20px;
}
.user .div1 .img .file{
	width: 40%;
	display: flex;
	align-items: center;
	margin-top: 0.5rem;
}
.user .div1 .img .file span{
	font-size: 30px;
	margin-left: 1rem;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
	border: 1px solid black;
	border-radius: 50%;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
	border-radius: 50%;
  }
.div1 .name{
	width: 98%;
	margin: 0 auto;
	margin-top: 1rem;
}
.div1 .name table{
	width: 96%;
	margin: 0 auto;
	font-size: 16px;
}
.div1 .name table tr td p{
	width: 50px;
}
.div1 .name table tr td input{
	width: 280px;
	line-height: 40px;
	margin: 10px;
	border: none;
	text-indent: 0.5em;
	border-radius: 4px;
}
.div1 .name table .tex{
	width: 280px;
	line-height: 40px;
	margin: 10px;
	border: none;
	border-radius: 4px;
	resize: none; /* 禁止拖动 */
}
.user .el-button{
	width: 160px;
	margin-top: 1rem;
	margin-left: 8rem;
}
</style>
